<template>
	<view class="login-container">

		<view class="login-title">
			<u--text text="用户登录" align="center"></u--text>
		</view>
		<view>
			<u-avatar size="60" class="photo-tx"></u-avatar>
		</view>
		<view class="login-form">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>

				<u-col span="10">
					<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="formLogin"
						:errorType="errorType">
						<u-form-item prop="username" borderBottom ref="username">
							<u--input v-model="userInfo.username" border="none" clearable placeholder="请输入用户名"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
							></u--input>
						</u-form-item>
						<u-form-item  prop="password" borderBottom ref="password">
							<u--input v-model="userInfo.password" border="none" :password='Showpsw' @change="pwdChange" clearable placeholder="请输入密码"
								prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399">
								<template slot="suffix" class="icon-container">
										
										<u-icon v-if="Showpsw===true" name="eye-off" @click="pwdToogle"></u-icon>	
										<u-icon v-if="Showpsw===false" name="eye-fill" @click="pwdToogle"></u-icon>
										<u-icon v-if="pwdClose" name="close-circle-fill" size="12" @click="clearPwd"></u-icon>
								</template>
								</u--input>
						</u-form-item>

					</u--form>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>

				<u-col span="10">
					<u-button type="primary" text="登录" @click="login"></u-button>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>

				<u-col span="10">
					<u--text text="没有账号？请注册" align="right" @click="toRegister"></u--text>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwdClose:false,
				Showpsw: true,
				userInfo: {
					username: '',
					password: ''
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'password': [{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 10,
							message: '长度在6-10个字符之间',
							trigger: ['blur', 'change']
						}
					],
				},
				errorType: 'border-bottom',
			}
		},
		methods: {
			clearPwd(){
				this.userInfo.password =''
			},
			pwdChange(){
				if(this.userInfo.password !=''){
					this.pwdClose=true
				}else{
					this.pwdClose=false
				}
			},
			pwdToogle(){
				this.Showpsw =! this.Showpsw
			},
			toRegister() {
				console.log("toRegister")
				uni.navigateTo({
					url: "/pages/register/register"
				})
			},
			login() {
				console.log("login")
				this.$refs.formLogin.validate().then(res => {
					uni.request({
						url: 'https://www.gzzyue.com/prod-api/login', //登录真实接口地址。
						data: this.userInfo,
						method: 'POST',
						success: (res) => {
							console.log('res:', res);
							if (res.statusCode == 200) {
								if (res.data.code == 200) {
									uni.setStorage({
										key: 'token',
										data: res.data.token,
										success() {
											console.log('成功存储')
											// uni.navigateBack()
											uni.reLaunch({
												url: uni.getStorageSync("targeUrl")
											})
										}
									})
								} else if (res.data.code == 500) {
									uni.$u.toast(res.data.msg)
								} else {
									uni.$u.toast('系统服务异常，请联系管理员！')
								}
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						},
						fail: (errors) => {
							console.log('errors:', errors);
							uni.$u.toast('服务器错误，请联系管理员！')
						},
					});
					// uni.$u.toast('校验通过')

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
				// console.log("login")

			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		.login-title {
			margin: 50rpx;

		}

		.photo-tx {
			margin: 0 auto;
		}

		.login-form {
			margin-top: 50rpx;
			/deep/.u-input__content__subfix-icon{
				display: flex;
				flex-direction: row;
			}
		}
	}
</style>
